<script lang="ts" setup>
import * as productApi from "@/api/train/product";
import { useRouter } from "vue-router";
import { getOSSURL } from "@/utils/utils";

const props = defineProps({
  spuId: {
    type: String,
    required: true,
  },
});

const spu = ref<ProductSpu | null>(null);
const selectedSkuIndex = ref(0);

productApi.getNormalSpuDetailById(props.spuId).then((res) => {
  spu.value = res.data;
  spu.value.picUrls = JSON.parse(spu.value.picUrls);
});

const router = useRouter();
function gotoBuy() {
  router.push({
    path: `/buy/${spu.value?.skuList[selectedSkuIndex.value].id}`,
  });
}
</script>

<template>
  <div class="min-h-screen bg-gray-1">
    <!-- Banner 图 -->
    <nut-swiper v-if="spu?.picUrls?.length" class="h-72 w-full" :pagination-visible="true" pagination-color="#426543">
      <nut-swiper-item v-for="item in spu?.picUrls" :key="item">
        <nut-image class="h-full w-full" :src="getOSSURL(item)" fit="cover" show-loading />
      </nut-swiper-item>
    </nut-swiper>
    <nut-image v-else class="min-h-64 w-full" :src="spu?.coverUrl" fit="cover" show-loading />

    <!-- 标题 -->
    <div class="my-3 mx-2 px-4 py-3 bg-white rd-3">
      <h1 class="text-xl c-gray-9">{{ spu?.spuName }}</h1>
      <p class="mt-1 c-gray-5">{{ spu?.spuDesc }}</p>
    </div>

    <!-- 套餐选择 -->
    <nut-divider class="px-3">套餐选择</nut-divider>
    <div class="my-3 px-6 flex flex-col gap-3">
      <div
        v-for="(item, index) in spu?.skuList"
        :key="item.id"
        class="flex items-center gap-3 pr-3 b-2 b-solid rd-3 of-hidden"
        :class="{
          'bg-white b-transparent': selectedSkuIndex !== index,
          'bg-blue-1 b-blue-3': selectedSkuIndex === index,
        }"
        @click="selectedSkuIndex = index"
      >
        <nut-image class="shrink-0 w-16 h-16" :src="getOSSURL(item.picUrl)" />
        <div class="grow of-hidden">{{ item.skuName }}</div>
        <div class="shrink-0 c-red-5 text-sm">
          ￥<span class="text-lg">{{ item.price / 100 }}</span>
        </div>
      </div>
    </div>

    <!-- 课程介绍 -->
    <nut-divider class="px-3">商品详情</nut-divider>
    <div class="my-3 bg-white">
      <div class="detail-content" v-html="spu?.detail"></div>
    </div>

    <!-- 底部栏 -->
    <div class="h-18"></div>
    <div class="fixed bottom-0 left-0 right-0 px-3 pb-3 pt-2 bg-white b-t b-t-gray-2 flex justify-between items-center">
      <div>
        <span class="text-xl c-red-5">￥{{ (spu?.skuList[selectedSkuIndex]?.price ?? 0) / 100 }}</span>
        <!-- <span class="text-sm c-gray-5 line-through ml-2"
          >￥{{ skuList[selectedSkuIndex]?.originalPrice }}</span
        > -->
      </div>
      <nut-button type="primary" @click="gotoBuy">立即购买</nut-button>
    </div>

    <!-- 客服按钮 -->
    <div class="fixed bottom-30 right-3 z-1" @click="router.push('/contact')">
      <img class="w-16 h-16" :src="getOSSURL('imgs/school/icons/kefu_lv.png')" />
    </div>
  </div>
</template>

<style>
.detail-content img {
  display: inline-block;
  width: 100%;
}
</style>
